(function () {
    var socket = io.connect("http://220.103.241.240:3000");

    /**
     * 메세지를 추가함
     * @param {Object} data
     * @param {String} [name] 닉네임, 빈 값이면 내가 보낸 것
     */
    var insertMessage = function (data, name) {
        var isMine = typeof name === "undefined";
        var list = $("#chat .chat-list");
        var tpl = $(isMine ? "#tpl_message_mine" : "#tpl_message");
        var output = tpl.html();

        output = output.replace("{message}", data.msg);

        if (!isMine) {
            output = output.replace("{name}", name);
        }

        list.html(list.html() + output);

        // 메세지를 받은 후 스크롤을 제일 아래로 내림
        list.scrollTop(list.get(0).scrollHeight);
    };

    // 메세지를 받았을 때
    socket.on("receive", function (data, name) {
        insertMessage(data, name);
    });

    $(document)
        // 로그인
        .on("pagebeforeshow", "#chat", function () {
            socket.emit("login", localStorage.name);
        })

        // 로그아웃
        .on("pagehide", "#chat", function () {
            socket.emit("logout");
        })

        .on("vclick", "#chat ._btn_send", function () {
            var message = $("#message").val();

            if (message) {
                var data = {
                    type: "text",
                    msg: message
                };
                socket.emit("send", data);

                // 자신의 메세지는 직접
                insertMessage(data);
                $("#message").val("");
            }
        });
})();